<template>
  <div class="container">

    编号：{{ num }} <span> </span>
    <button @click="updateNum">修改编号</button>
    <br />
    姓名：{{ person.name }} <span> </span>
    <button @click="updateName">修改姓名：</button>
    <br />
    年龄：{{ person.age }} <span> </span>
    <button @click="updateAge">修改年龄</button>
    <br />
    <button @click="update">修改人物</button>
    <hr>
    座驾{{ car.name }} 牌，{{ car.model.title }}
    <br>
    <button @click="updateCarModel">修改车型</button>
    <button @click="updateCar">置换新车</button>
  </div>

</template>


<script lang="ts" setup name="App">
import type { title } from 'process';
import { reactive, ref, shallowReactive, shallowRef } from 'vue';

let num = ref(1);
// let person = ref({
//   name:'张三',age:20
// })
let person = shallowRef({
  name: '张三', age: 20
})
// let car = reactive({
//   name:'porsche',title:911
// })
//shall修饰无法修改子对象属性
let car = shallowReactive({
  name:'porsche',
  model:{
    title:911
  }
})


function updateNum() {
  num.value += 1;
}
function updateName() {
  person.value.name = 'toy'
}
function updateAge() {
  person.value.age += 1;
}

function update() {
  person.value = {
    name: 'toy', age: 30
  }
}

function updateCar() {
  Object.assign(car,{name:'bwm',model:{title:'X6'}})
}

function updateCarModel(){
  car.model.title=715
}

</script>



<style scoped>

</style>